{% extends "base.html" %}
{% load static from staticfiles %}
{% block ng_control %}ng-controller="CanvasControls"{% endblock %}
{% block status_bar %}
    <div id="status" ng-model="status" ng-show="checkStatus()" class="alert alert-dismissable"
         ng-class="alert_status ? 'alert-warning' : 'alert-info'" xmlns="http://www.w3.org/1999/html"><h4 class="h4status">{[ status ]}</h4>
    <button type="button" class="close" ng-click="disableStatus()" aria-hidden="true">x</button>
    </div>
{% endblock %}
{% block page_content %}
<section class="content-header" xmlns="http://www.w3.org/1999/html">
</section>
<section class="content">

<div class="row large-margin">
    <div class="col-xs-1 col-sm-1 m-t" object-buttons-enabled="getSelected()" id="side_options">
        <div class="outer">
        <div class="middle">
        <div class="inner">
        <form id="image-form" style="width:100%;"  onsubmit="return false;">
            <input type='file'  id='imgfile' style="display:none"/>
            <a type='button' class="btn btn-primary btn-move" id='btnLoad' ng-click='load_image();'><i class="fa fa-image"></i>&nbsp;&nbsp;Add image</a>
        </form>
        <button type="button" class="btn btn-info  btn-move"  id="reset_zoom" ng-click="resetZoom()"><i class="fa fa-refresh"></i>&nbsp;Reset Zoom</button>
        <button type="button" class="btn btn-danger  btn-move"  id="clear" ng-click="confirmClear()"><i class="fa fa-trash"></i>&nbsp;&nbsp;Clean editor</button>
        <button type="button" class="btn btn-warning  btn-move"  id="clear_mask" ng-click="confirmClearMasks()"><i class="fa fa-trash"></i>&nbsp;Clear masks</button>
        <button id="drawing-mode_b"
          ng-click="setFreeDrawingMode(!getFreeDrawingMode(2),2)"
          ng-class="{'btn-inverse': getFreeDrawingMode(2)}" class="btn btn-move btn-warning ">
          <i class="fa fa-pencil"></i>&nbsp;&nbsp;Exclude </button>
        <div ng-show="getFreeDrawingMode(1)" class="drawing-mode">
            <button id="drawing-mode_x" ng-click="setFreeDrawingMode(!getFreeDrawingMode(1),1)" class="btn bg-red btn-move stop_btn"> <i class="fa fa-close"></i>&nbsp;&nbsp;Stop Drawing!</button>
        </div>
        <div ng-show="getFreeDrawingMode(2)" class="drawing-mode">
            <button id="drawing-mode_x_2" ng-click="setFreeDrawingMode(!getFreeDrawingMode(2),2)" class="btn btn-warning btn-move stop_btn"> <i class="fa fa-close"></i>&nbsp;&nbsp;Stop Drawing!</button>
        </div>
        <div id="drawing-mode-wrapper"  class="drawing-mode">
        <div id="drawing-mode-options"  ng-show="getFreeDrawingMode()">
          <h5 style="text-align: center">Brush width</h5>
          <input type="range" value="30" min="0" max="150" bind-value-to="drawingLineWidth">
        </div>
        </div>
        <div ng-show="canvas.getActiveGroup()">
            <button type="button" class="btn  btn-danger btn-object-action bg-maroon btn-move" id="remove-selected-group" ng-click="removeSelected()"><i class="fa fa-trash"></i>&nbsp;&nbsp;Delete</button>
            <button type="button" class="btn  btn-object-action btn-move" id="deselect_group" ng-click="deselect()"><i class="fa fa-minus"></i>&nbsp;&nbsp;Deselect</button>
        </div>
        <div ng-show="canvas.getActiveObject()">
            <button type="button" class="btn  btn-danger btn-object-action bg-maroon btn-move" id="remove-selected" ng-click="removeSelected()"><i class="fa fa-minus"></i>&nbsp;&nbsp;Delete</button>
            <button type="button" class="btn  btn-info btn-object-action btn-move" id="duplicate" ng-click="duplicate()"><i class="fa fa-copy"></i>&nbsp;&nbsp;Duplicate</button>
            <button id="send-backwards" class="btn btn-info  btn-object-action btn-move" ng-click="sendBackwards()"><i class="fa fa-step-backward"></i>&nbsp;&nbsp;Move back</button>
            <button id="bring-forward" class="btn btn-info  btn-object-action btn-move"  ng-click="bringForward()"><i class="fa fa-step-forward"></i>&nbsp;&nbsp;Move forward</button>
            <button id="send-to-back" class="btn btn-info  btn-object-action btn-move"  ng-click="sendToBack()"><i class="fa fa-backward"></i>&nbsp;&nbsp;Send to back</button>
            <button id="bring-to-front" class="btn btn-info  btn-object-action btn-move"  ng-click="bringToFront()"><i class="fa fa-forward"></i>&nbsp;&nbsp;Bring to front</button>
            <h5 style="text-align: center">Scale</h5>
            <input value="100" max="200" type="range" bind-value-to="scale">
            <div id="color-opacity-controls" ng-show="canvas.getActiveObject()">
                <h5 style="text-align: center">Opacity</h5>
                <input value="100" type="range" bind-value-to="opacity">
            </div>
            <button type="button" class="btn  btn-object-action bg-yellow btn-move" id="deselect" ng-click="deselect()"><i class="fa fa-minus"></i>&nbsp;&nbsp;Deselect</button>
        </div>
    </div>
    </div>
    </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4  m-t input">
        <div id="canvas-wrapper">
            <canvas id="canvas"  width="500" height="500"></canvas>
        </div>
        <div class="m-t row">
            <div class="col-xs-12" style="margin-bottom:15px">
                <h5 style="font-weight:bold" class="pull-left">Select index > retriever sequence for retrieval</h5>
                <div class="pull-right">
                    <a class="btn btn-primary" href="/retrievers/"><i class="fa fa-edit"></i> Create new retriever</a>
                </div>
            </div>
            <div class="col-xs-12">
            <select class="js-example-basic-multiple" multiple="multiple" id="indexer_list" style="width:100%">
            {% for index_name,irtuple in indexer_retrievers %}
                <option value="{{ irtuple }}" selected="selected">{{ index_name }}</option>
            {% endfor %}
            </select>
            </div>
        </div>
            <label for="result_count">Results</label>
            <input style="display:inline-block; margin-right:10px;width:50px;" type="number" name="result_count"  id="result_count" value="20" class="checkbox text-right index_name">
            <label for="generate_tags" >Apply Open Images tagger</label>
            <input type="checkbox" ng-model="generate_tags" class="checkbox" style="display: inline-block;margin-right:5px">
            <label for="entire_image">Send entire image</label>
            <input style="display:inline-block; margin-right:5px" type="checkbox" ng-model="send_entire_image" class="checkbox">
            <div class="row">
            <div class="col-xs-12" style="text-align:center">
                <h5 style="font-weight:bold" >Select object detectors</h5>
                <p>Select textbox to perform OCR (CTPN -> CRNN).
                   Select face detector to perform (face detection -> facenet -> exact retrieval,
                    in addition to sequence selected above)
                </p>
            </div>
            <div class="col-xs-12" style="margin-bottom:5px">
            <select class="js-example-basic-multiple" multiple="multiple" id="detector_list" style="width:100%">
            {% for d in detectors %}
                {% if forloop.first %}
                    <option value="{{ d.pk }}" selected="selected">{{ d.name }}</option>
                {% else %}
                    <option value="{{ d.pk }}">{{ d.name }}</option>
                {% endif %}
            {% endfor %}
            </select>
            </div>
        </div>
        <div style="width:70%;margin: 5px auto;text-align: center">
            <button href="" class="btn btn-primary btn-block" id="search_quick" ng-click="search(false)"><i class="fa fa-search"></i>&nbsp;&nbsp; Search by image</button>
        </div>
    </div>
    <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-4 m-t uploadmenu">
            <div class="row">
            <div class="col-lg-12">
                <div class="box box-primary">
                    <div class="box-body with_border">
                        <div class="row">
                            <div class="col-xs-7 text-center"><a class="btn btn-primary" data-toggle="modal" data-target="#allowed" href="#" ><i class="fa fa-upload"></i> Upload video, dataset or an export</a></div>
                            <div class="col-xs-5 text-center"><a class="btn btn-primary" data-toggle="modal" data-target="#ytdisclaimer" href="#" ><i class="fa fa-youtube"></i> Submit youtube url</a></div>
                        </div>
                        <div class="row m-t">
                            <p div class="col-xs-7 text-center"><a class="btn btn-primary" data-toggle="modal" data-target="#awscreds" href="#" ><i class="fa fa-cloud-download"></i> Bulk import from AWS S3 bucket</a></p>
                            <p div class="col-xs-5 text-center"><a class="btn btn-primary" href="/external" ><i class="fa fa-globe"></i> Import from VDN</a></p>
                        </div>

                        <div class="modal fade" tabindex="-1" role="dialog" id="allowed">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button><h4 class="modal-title">Upload video / dataset or exported zip file.</h4></div>
                                <div class="modal-body">
                                <p>An .mp4 video file or multiple images in a single zip file <a href="https://github.com/AKSHAYUBHAT/DeepVideoAnalytics/blob/master/tests/exampledataset.zip" target="_blank">(example of a zip file)</a> or an exported ".dva_export.zip".</p>
                                <form role="form"  method="post" enctype="multipart/form-data" action="#" >
                                    <div class="form-group">
                                    <input id="id_name" name="name" class="form-control" type="text" required="" placeholder="provide a name">
                                    </div>
                                    <div class="row">
                                    <div class="col-xs-10 col-xs-offset-1">
                                        <div class="form-group text-center">
                                        <label for="id_file" >Video (.mp4) or zip file:</label>
                                        <input style="margin: 10px auto 10px" id="id_file" name="file" class="btn bg-blue btn-file form-control" type="file" required="">
                                        </div>
                                    </div>
                                    </div>
                                    <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                        <label for="nth">Extract every n<sup>th</sup> frame from video<input id="nth" class="form-control" name="nth" type="number" value="{{ rate }}"></label>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                        <label for="rescale">Rescale frames to width <input id="rescale" class="form-control" name="rescale" type="number" placeholder="Default original width"></label>
                                        </div>
                                    </div>
                                    </div>
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-primary btn-block">Upload</button>
                                </form>
                            </div>
                            </div>
                        </div>
                        </div>
                        <div class="modal fade" tabindex="-1" role="dialog" id="ytdisclaimer">
                        <div class="modal-dialog" role="document"><div class="modal-content">
                            <div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Submit Youtube url</h4></div>
                            <div class="modal-body"><p> <span style="font-weight:bold">Legal disclaimer:</span>Its your responsibility to abide by laws governing <a target="_blank" href="https://www.youtube.com/static?template=terms">Youtube TOS</a> in your jurisdiction. We use <a target="_blank" href="https://rg3.github.io/youtube-dl/">youtube-dl</a> to process urls.</p>
                                <form role="form"  method="post" action="/youtube" >
                                <div class="form-group">
                                    <input id="id_ytname" name="name" class="form-control" type="text" required="" placeholder="provide a name">
                                </div>
                                <div class="form-group">
                                    <input id="id_yturl" name="url" class="form-control" type="text" required="" placeholder="url of youtube video">
                                </div>
                                <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                    <label for="nth">Extract every n<sup>th</sup> frame from video<input id="nth" class="form-control" name="nth" type="number" value="30"></label>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="form-group">
                                    <label for="rescale">Rescale frames to width <input id="rescale" class="form-control" name="rescale" type="number" placeholder="Default original width"></label>
                                    </div>
                                </div>
                                </div>
                                <div class="form-group">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-primary btn-block">submit</button>
                                </div>
                        </form>

                            </div>
                        </div>
                        </div>
                        </div>
                        <div class="modal fade" tabindex="-1" role="dialog" id="awscreds">
                        <div class="modal-dialog" role="document"><div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button><h4 class="modal-title">Import bulk files from AWS S3</h4></div>
                            <div class="modal-body" style="text-align:left">
                                <p>We suggest setting AWS authentication credentials using one of following methods.</p>
                                    <ul>
                                        <li>In an aws config file.</li>
                                        <li>Via Environment variables inside your docker-compose .yml</li>
                                        <li>Using IAM Roles (instance metadata discovery service) when running DVA on AWS.</li>
                                    </ul>
                                <p>We do not provide a method to enter AWS credentials via web interface.</p>
                                <form role="form"  method="post" action="/import_s3" >
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-6"><input id="id_s3_region" name="region" class="form-control" type="text" required="" placeholder="S3 region" value="us-east-1"></div>
                                        <div class="col-sm-6"><input id="id_s3_bucket" name="bucket" class="form-control" type="text" required="" placeholder="S3 bucket"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <textarea id="id_s3_key" rows="2" name="key" class="form-control" type="text" required="" placeholder="S3 key or list of keys (.mp4, .zip or .dva_export.zip) with one per line"></textarea>
                                </div>
                                <div class="form-group">
                                    {% csrf_token %}
                                <button type="submit" class="btn btn-primary btn-block">Import</button>
                                </div>
                                </form>
                            </div></div>
                        </div>
                        </div>
                    </div>
                </div>
                <div class="box box-primary">
                    <div class="box-body text-center">
                        <div class="row">
                            <div class="col-xs-7"><a class="btn btn-primary" href="/stored_process/"><i class="fa fa-play"></i> Run custom DVAPQL script</a></div>
                            <div class="col-xs-5"><a class="btn btn-primary" href="/process/"><i class="fa fa-list"></i> Monitor processes</a></div>
                        </div>
                    </div>
                </div>
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <div class="row">
                            <div class="col-xs-9">
                                <h4>Tasks status</h4>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn btn-primary btn-block" href="{% url 'tasks' %}" style="margin: 10px auto" > <i class="fa fa-list"></i> All tasks</a>
                            </div>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row text-center">
                            <div class="col-xs-3">
                                <a class="btn btn-warning" href="/tasks/pending/" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ pending_tasks }} pending</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn btn-primary" href="/tasks/running/" style="margin: 10px auto" > <i class="fa fa-gears"></i> {{ running_tasks }} running</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn btn-success" href="/tasks/successful/" style="margin: 10px auto" > <i class="fa fa-check"></i> {{ successful_tasks }} done</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn btn-danger" href="/tasks/failed/" style="margin: 10px auto" > <i class="fa fa-close"></i> {{ errored_tasks }} failed</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h4>Objects</h4>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <a class="btn" href="/videos/" style="margin: 10px auto" > <i class="fa fa-video-camera"></i> {{ video_count }} video / datasets</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/videos/" style="margin: 10px auto" > <i class="fa fa-picture-o"></i> {{ frame_count }} frames</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/queries/" style="margin: 10px auto" > <i class="fa fa-search"></i> {{ query_count }} queries</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/models/" style="margin: 10px auto" > <i class="fa fa-list"></i> {{ index_entries_count }} indexes</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <a class="btn" href="/models/" style="margin: 10px auto" > <i class="fa fa-square"></i> {{ custom_detector_count }} Trained detectors</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/tasks/" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ task_events_count }}  tasks </a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/process/" style="margin: 10px auto" > <i class="fa fa-list"></i> {{ process_count }} processes</a>
                            </div>
                            <div class="col-xs-3">
                                <a class="btn" href="/external/" style="margin: 10px auto" > <i class="fa fa-globe"></i> {{ external_servers_count }} VDN servers</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row m-t">
    <div class="col-lg-12" ng-show="results_available()" >
    <div class="box">
    <div class="box-header box-primary text-center">
        <h3>Retrieval results for query image</h3>
    </div>
    </div>
    </div>
    <div class="col-lg-6" ng-repeat="(name, entries) in results">
    <div class="box">
    <div class="box-header">
        <h4>Results: {[ name ]} </h4>
    </div>
    </div>
        <div class="row">
        <div ng-repeat="item in entries" class="col-lg-3 col-sm-3 col-xs-6" >
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>{[ item.rank ]} {[ item.result_type ]}
                        <input type="checkbox" class="selection_box pull-right" id="cbox_{[ item.frame_id]}" name="cbox_{[ item.frame_id]}" />
                    </h4>
                    <p class=""><a href="/videos/{[ item.video_id ]}"> Video/Dataset {[ item.video_id ]} </a> at {[ item.frame_index ]}</p>
                    <div class="text-center">
                    </div>
                </div>
                <div class="box-body" style="height:220px">
                    <a href="/frames/{[ item.frame_id ]}"><img class="img-responsive img-bordered-sm" style="max-height:200px;margin-left:auto;margin-right:auto"  ng-src="{[ item.url ]}">
                    </a>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-lg-12" ng-show="results_available()" >
    <div class="box">
    <div class="box-header box-primary text-center">
        <h3>Detections, annotations and retrieval results with regions as query</h3>
    </div>
    </div>
        <div class="row">
        <div class="col-lg-12" ng-repeat="item in regions">
            <div class="box box-primary">
                <div class="box-header with-border text-center">
                    <h4 style="display:inline-block" class="pull-left">{[ item.region_type ]}</h4>
                    <h4 style="display:inline-block" >Object name: {[ item.object_name ]}</h4>
                    <h4 style="display:inline-block" class="pull-right">Confidence: {[ item.confidence ]}</h4>
                </div>
                <div class="box-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div style="width: {[ item.w ]}px; height: {[ item.h ]}px; position: relative;overflow:hidden;margin: auto;">
                          <img src="{[ query_url ]}" id="image" style="position: absolute; top: -{[ item.y ]}px; left: -{[ item.x ]}px" />
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div style="margin:5px"><textarea class="uneditable-textarea" disabled="disabled" style="height:100px;width:100%" placeholder="text metadata if present">{[ item.text ]}</textarea></div>
                        <div style="margin:5px"><textarea class="uneditable-textarea" disabled="disabled" style="height:100px;width:100%" placeholder="JSON metadata if present">{[ item.metadata ]}</textarea></div>
                    </div>
                </div>
                    <div class="row">
                    <div class="col-lg-12" ng-repeat="(rname, rentries) in item.results">
                        <h4>Results (using above bounding box region as query): {[ rname ]} </h4>
                        <div class="row">
                        <div ng-repeat="ritem in rentries" class="col-lg-3 col-sm-3 col-xs-6" >
                            <div class="clearfix" ng-if="$index % 4 == 0"></div>
                            <div class="box">
                                <div class="box-header with-border">
                                    <p class=""> {[ ritem.rank ]} : {[ ritem.result_type ]} in <a href="/videos/{[ ritem.video_id ]}"> Video/Dataset {[ ritem.video_id]}</a> at {[ ritem.frame_index ]}</p>
                                </div>
                                <div class="box-body" style="height:220px">
                                    <a href="/frames/{[ ritem.frame_id ]}"><img class="img-responsive img-bordered-sm" style="max-height:200px;margin-left:auto;margin-right:auto"  ng-src="{[ ritem.url ]}">
                                    </a>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="col-lg-offset-2 col-lg-8" ng-show="results_available()">
        <div class="box">
        <div class="box-body"><div class="row">
            <div class="col-lg-10 text-center"><textarea rows="1"  style="width:95%;margin: auto" placeholder="comma separated list of labels"></textarea></div>
            <div class="col-lg-2 text-center"><a ng-click="label_selected" class="btn btn-primary" >Label selected</a></div>
        </div></div>
        </div>
    </div>
</div>
</section>
{% endblock %}


{% block page_js %}
    <script>
        var annotation_mode = false;
        var status = "Please add image to search or upload.";
        var payload = "{{ payload }}";
        var csrf_token = "{% csrf_token %}";
        {% if initial_url %}
            var initial_url="{{ initial_url }}";
        {% else %}
            var initial_url=null;
        {% endif %}
    var indexer_selector = $("#indexer_list");
    indexer_selector.select2({theme: "bootstrap"});
    var detector_selector = $("#detector_list");
    detector_selector.select2({theme: "bootstrap"});
    var video_name = $("#video_name");
    video_name.select2({theme: "bootstrap"});
    </script>
    <script src={% static 'plugins/jquery.mousewheel.min.js' %}></script>
    <script src={% static 'plugins/underscore-min.js' %}></script>
    <script src={% static 'fabric/fabric.js' %}></script>
    <script type="text/javascript" src={% static 'vision/jsfeat-min.js' %}></script>
    <script type="text/javascript" src={% static 'vision/slic-segmentation.js' %}></script>
    <script type="text/javascript" src={% static 'vision/pf-segmentation.js' %}></script>
    <script type="text/javascript" src={% static 'vision/compatibility.js' %}></script>
    <script type="text/javascript" src={% static 'vision/dat.gui.min.js' %}></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src={% static 'app/utils.js' %}></script>
    <script src={% static 'app/app_config.js' %}></script>
    <script src={% static 'app/controller.js' %}></script>
    <script src={% static 'app/app.js' %}></script>
{% endblock %}
{% block ngblock %}ng-app="cveditor"{% endblock %}
{% block page_css %}
    <link rel="stylesheet" href={% static 'app/app.css' %}>
{% endblock %}
